<script setup lang="tsx">
import { computed, ref, watch } from "vue";
import { NfForm } from "@nf-ui/components/form";
import { FormInstance } from "element-plus";
import { IFormColumn } from "@nf-ui/components/form/src/form-types";

const formData = ref({
  name: "",
  hobby: "1",
  test: "",
});

const form = ref<FormInstance>();

const handleReset = () => {
  form.value?.resetFields();
};

const _ref = ref();
watch(
  () => _ref.value,
  (value) => {
    console.log(value);
  },
);

const column = computed<IFormColumn[]>(() => {
  return [
    {
      label: "姓名",
      prop: "name",
      layout: { span: 12 },
      placeholder: "请输入姓名",
    },
    {
      label: "爱好",
      prop: "hobby",
      layout: { span: 12 },
      render: (
        h: any,
        form: {
          hobby: any;
        },
      ) => {
        return (
          <el-select ref={_ref} v-model={form.hobby} placeholder={"请选择爱好"}>
            <el-option label="羽毛球" value={"1"}></el-option>
            <el-option label="乒乓球" value={"2"}></el-option>
          </el-select>
        );
      },
    },
    {
      label: "测试",
      prop: "test",
      placeholder: "请输入测试内容",
    },
  ];
});
</script>

<template>
  <nf-form
    ref="form"
    :model="formData"
    :column="column"
    label-position="right"
    label-width="70px"
    submit
    reset
    inline
    submit-text="搜索"
  ></nf-form>
</template>

<style scoped lang="scss">
:deep(.el-select) {
  width: 200px;
}
</style>
